<template>
	<el-row :gutter="15" class="businessRow">
		<el-col :span="6">
			<div class="leftBox">
				<div class="toolBox">
					<el-button icon="el-icon-plus" type="primary" v-permission @click="businessDialog.visible = true">
						新增
					</el-button>
					<!-- <el-input
						class="searchBusinessInput"
						prefix-icon="el-icon-search"
						v-model="business.filters.NAME"
						placeholder="搜索业务系统..."
					></el-input> -->
					<el-button icon="el-icon-delete" type="danger" v-permission
						v-show="businessCardActivate != '0'&&businessCardActivate != 'all'"
						@click="handleClick('deleteBusiness')">
						删除
					</el-button>
					<div style="margin-top: 15px">
						<el-input clearable v-model="selectBusiness" placeholder="请输入检索的业务系统名"></el-input>
					</div>
				</div>
				<el-divider></el-divider>
				<div class="businessBox" ref="businessBox" v-loading="business.loading" element-loading-text="拼命加载中"
					element-loading-spinner="el-icon-loading">
					<el-card class="businessCard" v-for="(item, index) in BusinessData" :key="item.BID"
						:shadow="businessCardShadow(item.BID)" :class="businessCardClass(item.BID)"
						@click.native="handleClick('businessCard', item.BID)"
						@mouseenter.native="handleMouseEnter('businessCard', item.BID)"
						@mouseleave.native="handleMouseLeave('businessCard', item.BID)">
						<el-row :gutter="10">
							<el-col :span="20">
								<div>
									<span>{{ index + 1 }}</span>
									<el-divider direction="vertical"></el-divider>
									{{ item.NAME }}
								</div>
							</el-col>
							<el-col :span="4">
								<div v-if="
                    (item.BID != '0'&&item.BID != 'all' && businessCardHover[item.BID]) ||
                    item.BID == businessCardActivate
                  ">
									<el-button icon="el-icon-edit" type="text" size="mini"
										v-show="item.BID != '0'&&item.BID != 'all'" v-permission
										@click="handleClick('editBusiness', item)">
										编辑
									</el-button>
								</div>
							</el-col>
						</el-row>
					</el-card>
				</div>
			</div>
		</el-col>
		<el-col :span="18">
			<div class="rightBox">
				<V-BusinessNode :BID="businessCardActivate" :CountData="CountData"
					:SERVICESNAMEColumns="SERVICESNAMEColumns"></V-BusinessNode>
			</div>
		</el-col>

		<!-- 弹窗：新增、编辑 -->
		<el-dialog title="" :visible.sync="businessDialog.visible" width="30%" @close="handleClose">
			<el-form :model="businessDialog.form" label-width="120px">
				<el-form-item label="业务系统名称">
					<el-input v-if="businessDialog.form.opera != businessDialog.opera_Modify"
						v-model="businessDialog.form.data[0].NAME"
						@keyup.enter.native="handleClick('createNewBusiness')"></el-input>
					<el-input v-if="businessDialog.form.opera == businessDialog.opera_Modify"
						v-model="businessDialog.form.data[0].NAME"
						@keyup.enter.native="handleClick('editBusinessSave')"></el-input>
				</el-form-item>
				<!-- <el-form-item label="业务系统类别">
					<el-radio-group v-model="businessDialog.form.data[0].TYPE">
						<el-radio-button label="Database">数据库</el-radio-button>
						<el-radio-button label="Host">服务器</el-radio-button>
					</el-radio-group>
				</el-form-item> -->
			</el-form>
			<div slot="footer">
				<el-button @click="businessDialog.visible = false">取 消</el-button>
				<el-button type="primary" @click="handleClick('createNewBusiness')"
					v-if="businessDialog.form.opera != businessDialog.opera_Modify">确 定</el-button>
				<el-button type="primary" @click="handleClick('editBusinessSave')"
					v-if="businessDialog.form.opera == businessDialog.opera_Modify">保 存</el-button>
			</div>
		</el-dialog>

		<v-Dialog :dialogVisibleAdd="dialogVisibles" :dialogVisibleEdit="dialogVisibleEdits"
			@dialogCloseAdd="dialogCloseAdd" @dialogCloseEdit="dialogCloseEdit" :dialogData="dialogData"></v-Dialog>
	</el-row>
</template>

<script>
	import {
		submitAdmin,
		getBusinessNode,
		getBusinessServicesname
	} from "@/api/index.js";
	import tableColumns from "./BusinessColumns";
	import vDialog from "./businessDialog";
	import vPagination from "common/Pagination.vue";
	import {
		getUserData
	} from "@/utils/IndexedDB.js";
	import VBusinessNode from "./components/BusinessNode.vue";
	export default {
		name: "mgBusiness",
		components: {
			vDialog,
			vPagination,
			VBusinessNode,
		},
		data() {
			return {
				postData: {
					opera: "",
					curPage: 1,
					pageSize: 10000,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "exactquery", // 精确查询
					filters: {},
				},
				dataTotal: 100,
				tableColumns: tableColumns,
				dialogVisibles: false,
				dialogVisibleEdits: false,

				dialogData: {
					SERVICESNAME: "",
					SUPPORT: "",
					REMARK: "",
					ID: "",
					CREATEDATE: "",
				},

				business: {
					get_opera: "GetServicesName",
					del_opera: "DeleteServicesName",
					filters: {
						NAME: "",
					},
					loading: false,
					data: [],
				},
				businessCardActivate: "",
				businessCardHover: {},
				businessDialog: {
					opera_Create: "CreateServicesName",
					opera_Modify: "ModifyServicesName",
					visible: false,
					form: {
						opera: "",
						data: [{
							NAME: "",
							TYPE: "测试分类", // Database、Host、All
						}, ],
					},
				},
				selectBusiness: "",
				CountData: {},
				Useless: "0",
				SERVICESNAMEColumns: {},
			};
		},
		created() {
			this.getBusinessData();
			// 选中默认
			this.businessCardActivate = "all";
		},

		computed: {
			BusinessData() {
				return this.business.data.filter((d) => {
					return d.NAME.includes(this.selectBusiness);
				});
			},
		},
		methods: {
			async getBusinessData() {
				await getBusinessServicesname().then((_) => {
					this.SERVICESNAMEColumns = _;
				});
				await getUserData("userBase", "infoBase", 0).then((res) => {
					this.userType = res.ms_type;
					this.power = res.power;
					this.userEndTime = res.endTime;
				});
				this.business.loading = true;

				this.postData.opera = this.business.get_opera;
				this.postData.filters = this.business.filters;
				submitAdmin({
					postData: JSON.stringify(this.postData),
				}).then((res) => {
					res.data.unshift({
						BID: "all",
						NAME: "全部",
						TYPE: "测试分类",
					});
					this.business.data = res.data;
					this.InitBusinessNode(this.businessCardActivate);
					this.business.loading = false;
				});
			},
			// 鼠标点击
			handleClick(flag, data) {
				let _this = this;
				let _run = {
					createNewBusiness: function() {
						_this.businessDialog.form.opera = _this.businessDialog.opera_Create;
						_this.submitBusinessData();
					},
					editBusiness: function() {
						_this.businessDialog.form.opera = _this.businessDialog.opera_Modify;
						_this.businessDialog.form.data[0].NAME = data.NAME;
						_this.businessDialog.visible = true;
					},
					editBusinessSave: function() {
						_this.submitBusinessData(_this.businessCardActivate);
					},
					businessCard: function() {
						_this.businessCardActivate = data;
					},
					deleteBusiness: function() {
						_this.submitDeleteBusiness();
					},
				};
				// 执行匹配的函数
				_run[flag]();
			},
			// 鼠标移入
			handleMouseEnter(box, key) {
				if (this.businessCardHover.hasOwnProperty(key)) {
					this.businessCardHover[key] = true;
				} else {
					/**
					 * 对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。
					 * 可以用 set 添加响应式 property
					 */
					this.$set(this.businessCardHover, key, true);
				}
			},
			// 鼠标移出
			handleMouseLeave(box, item) {
				this.businessCardHover[item] = false;
			},
			submitBusinessData(bid) {
				let _postData = this.businessDialog.form;
				if (bid) {
					_postData.data[0].BID = bid;
				}

				submitAdmin({
					postData: JSON.stringify(_postData),
				}).then((res) => {
					if (res.includes("成功")) {
						this.$message({
							message: res,
							type: "success",
						});

						this.getBusinessData();
						this.businessDialog.visible = false;
					} else {
						this.$message({
							message: res,
							type: "error",
						});
					}
				});
			},
			businessCardShadow(businessBID) {
				if (businessBID == this.businessCardActivate) {
					return "always";
				} else {
					return "hover";
				}
			},
			businessCardClass(businessBID) {
				if (businessBID == this.businessCardActivate) {
					return "businessCardBG";
				} else {
					return "";
				}
			},
			handleClose() {
				this.businessDialog.form = this.$options.data().businessDialog.form;
			},
			submitDeleteBusiness() {
				this.$confirm("此操作将永久删除选中业务系统, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						if (this.businessCardActivate == "0") {
							this.$message({
								message: "非法操作，禁止删除默认业务系统！",
								type: "error",
							});
						} else {
							let _data = {
								opera: this.business.del_opera,
								bid: this.businessCardActivate,
							};

							submitAdmin({
								postData: JSON.stringify(_data),
							}).then((res) => {
								if (res == "删除成功") {
									this.$message({
										message: "删除成功！",
										type: "success",
									});

									this.getBusinessData();
									// 选中默认
									this.businessCardActivate = "0";
								} else {
									this.$message({
										message: "删除失败，请重试！",
										type: "error",
									});
								}
							});
						}
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});
			},
			dialogCloseAdd() {
				this.dialogVisibles = false;
			},
			dialogCloseEdit() {
				this.dialogVisibleEdits = false;
			},
			tableEdit(row) {
				(this.dialogVisibleEdits = true), (this.dialogData = row);
			},
			tableDelect(id) {
				this.$confirm("确定删除？", "确认信息", {
						distinguishCancelAndClose: true,
						confirmButtonText: "确定",
						cancelButtonText: "取消",
					})
					.then(() => {
						this.$message({
							type: "success",
							message: "删除成功",
						});
					})
					.catch(() => {
						this.$message({
							type: "error",
							message: "删除失败",
						});
					});
			},
			dialogOpen() {
				this.dialogVisibles = true;
			},

			//开发中 切换业务状态
			servicess(status) {
				switch (status.SERVICESSTATUS) {
					case 1:
						this.$confirm("是否关闭?", "提示", {
								confirmButtonText: "确定",
								cancelButtonText: "取消",
								type: "warning",
							})
							.then(() => {
								status.SERVICESSTATUS = 0;
								this.$message({
									type: "success",
									message: "关闭成功!",
								});
							})
							.catch(() => {
								this.$message({
									type: "error",
									message: "关闭失败",
								});
							});

						break;
					case 0:
						this.$confirm("是否开启?", "提示", {
								confirmButtonText: "确定",
								cancelButtonText: "取消",
								type: "warning",
							})
							.then(() => {
								status.SERVICESSTATUS = 1;
								this.$message({
									type: "success",
									message: "开启成功!",
								});
							})
							.catch(() => {
								this.$message({
									type: "error",
									message: "开启失败",
								});
							});
						break;
				}
			},
			getPaginationCurPage(val) {
				this.postData.curPage = val;

				this.getBusinessData();
			},
			getPaginationPageSize(val) {
				// 分页大小改变之后，重置当前页码为 1
				this.postData.curPage = 1;
				this.postData.pageSize = val;

				this.getBusinessData();
			},
			InitBusinessNode(data) {
				let ActivateItem = this.business.data.filter((item) => {
					return item.BID === data;
				});

				if (ActivateItem.length > 0) {
					getBusinessNode({
						system: ActivateItem[0].NAME
					}).then((res) => {
						if (res) {

							this.CountData = res;
							this.$message.success("获取成功");
						} else {
							this.CountData = {};
							this.$message.error("获取业务系统节点错误");
						}
					});
				}
			},
		},
		watch: {
			businessCardActivate: function(Newval, oldval) {

				this.InitBusinessNode(Newval);
			},
			selectBusiness: function(n, o) {
				this.businessCardActivate = this.BusinessData[0].BID
			}
		},
	};
</script>

<style scoped>
	.businessRow>.el-col>div {
		padding: 15px;
		border-radius: 4px;
		background: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	/* 工具栏 */
	.businessRow>.el-col>div.leftBox .toolBox {
		display: inline-block;
	}

	.businessRow>.el-col>div.leftBox .toolBox button:first-child {
		margin-right: 15px;
	}

	.businessRow>.el-col>div.leftBox .toolBox .searchBusinessInput {
		width: 200px;
		margin-right: 15px;
	}

	/* 左边 */
	.businessRow>.el-col>div.leftBox>.businessBox>.businessCard {
		margin-bottom: 10px;
	}

	.businessRow>.el-col>div.leftBox .businessBox>.businessCard>.el-card__body {
		padding: 10px 15px;
	}

	.businessRow>.el-col>div.leftBox .businessBox>.businessCard>.el-card__body>.el-row>.el-col {
		line-height: 32px;
	}

	.businessRow>.el-col>div.leftBox>.businessBox>.businessCard>.el-card__body>.el-row>.el-col .el-button--text {
		color: darkcyan;
	}

	.businessRow>.el-col>div.leftBox>.businessBox>.businessCard>.el-card__body>.el-row>.el-col .el-button--text:hover {
		color: cadetblue;
	}

	.businessRow>.el-col>div.leftBox>.businessBox>.businessCard>.el-card__body>.el-row>.el-col:last-child {
		text-align: left;
	}

	.businessRow>.el-col>div.leftBox>.businessBox>.businessCardBG {
		color: currentColor;
		background: antiquewhite;
	}

	.rightBox-head {
		margin-bottom: 20px;
	}

	.businessBox {
		height: calc(70vh /var(--zoom));
		overflow-y: scroll;
		padding-right: 6px
	}

	.businessBox:hover ::-webkit-scrollbar-thumb {
		background-color: rgb(193, 193, 193, 1);
		border-radius: 3px;
	}

	.businessBox::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	.businessBox::-webkit-scrollbar-thumb {
		background-color: rgb(193, 193, 193, 0);
		border-radius: 3px;
		/* height: 20px; */
	}

	.rightBox:hover::-webkit-scrollbar-thumb {
		background-color: rgb(193, 193, 193, 1);
		border-radius: 3px;
	}

	.rightBox {
		height: 83.5vh;
		overflow-y: scroll;
	}

	.rightBox::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	.rightBox::-webkit-scrollbar-thumb {
		background-color: rgb(193, 193, 193, 0);
		border-radius: 3px;
	}
</style>
